<template>
    <div class="login-container">
        <div class="logo-banner">
            <img src="/cloud1.jpg">
        </div>
        <div class="content">
            <div class="logo-content">
                <span class="title"><i>欢迎使用云表单</i></span>
                <img src="/cloud2.jpg" alt="" class="cloud">
                <el-tabs v-if="formType == 'login'" v-model="loginType" class="login-form-tab">
                    <el-tab-pane label="账号密码登录" name="account">
                        <el-form ref="accountLoginForm" :model="accountForm" :rules="accountLoginRules" class="account-login-form" hide-required-asterisk label-position="top" size="small" status-icon @keyup.enter.native="loginHandle">
                            <el-form-item prop="account">
                                <el-input v-model="accountForm.account" autocomplete="off" placeholder="请输入用户名" prefix-icon="el-icon-user-solid" />
                            </el-form-item>
                            <el-form-item prop="password">
                                <el-input v-model="accountForm.password" autocomplete="off" placeholder="请输入密码" prefix-icon="el-icon-lock" show-password />
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary" @click="loginHandle">
                                    登录
                                </el-button>
                                <el-link class="ml-20 link-btn" @click="toForgetPwdHandle">
                                    忘记密码
                                </el-link>
                                <el-link class="ml-20 link-btn" @click="formType = 'reg'">
                                    立即注册
                                </el-link>
                            </el-form-item>
                            <div class="other-login">
                                <p>第三方登录</p>
                                <span @click="redirectUrl(giteeLoginAuthorizeUrl)">
                                    <svg-icon class="other-login-icon" name="gitee" />
                                </span>
                            </div>
                        </el-form>
                    </el-tab-pane>
                </el-tabs>
                <register v-else @success="registerSuccessHandle" />
            </div>
        </div>
    </div>
</template>

<script>
import { getCurrentDomain } from '@/utils'
// 引入组件
import constants from '@/utils/constants'
import Register from '../register/index.vue'

export default {
    name: 'Login',
    components: {
        Register
    },
    data() {
        const validateAccount = (rule, value, callback) => {
            const reg1 = /^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$/
            const reg2 = /^(?:0|86|\+86)?1[3456789]\d{9}$/
            if (reg1.test(value) || reg2.test(value)) {
                callback()
            } else {
                callback(new Error('请输入正确的用户名'))
            }
        }
        return {
            formType: 'login',
            loginType: '',
            // agreeProtocol: '',
            accountLoginRules: {
                account: [
                    { required: true, trigger: 'blur', message: '请输入用户名' },
                    { trigger: 'blur', validator: validateAccount }
                ],
                password: [
                    {
                        required: true,
                        trigger: 'blur',
                        message: '请输入密码'
                    },
                    {
                        pattern: constants.passwordReg,
                        message: constants.passwordRegDesc
                    }
                ]
            },
            accountForm: {
                email: '',
                password: ''
            }
        }
    },
    computed: {
        enableWx() {
            return constants.enableWx
        }
    },
    watch: {},
    created() {
        if (constants.enableWx) {
            const self = this
            // this.getLoginWxQrCode()
            this.refreshWxQrcodeTimer = setInterval(() => {
                if (self.loginType == 'account') {
                    // 如果是账号登录模式就暂停轮询
                    return
                }
                // this.getLoginWxQrCode()
            }, 5 * 60 * 1000)
            this.wxQrcodeResultTimer = setInterval(() => {
                if (self.loginType == 'account') {
                    // 如果是账号登录模式就暂停轮询
                    return
                }
                // this.getLoginWxQrCodeResult()
            }, 5 * 1000)
            this.getgiteeLoginAuthorizeUrl()
        } else {
            this.loginType = 'account'
        }
    },
    destroyed() {
        clearInterval(this.refreshWxQrcodeTimer)
        clearInterval(this.wxQrcodeResultTimer)
    },
    methods: {
        // 忘记密码
        toForgetPwdHandle() {
            this.$router.push({ path: '/forget/password' })
        },
        // gitee登录授权地址
        getgiteeLoginAuthorizeUrl() {
            let reUrl = getCurrentDomain() + '/redirect/giteelogin'
            this.$api
                .get('/login/gitee/authorize/url', {
                    params: { redirectUri: reUrl }
                })
                .then(res => {
                    this.giteeLoginAuthorizeUrl = res.data
                })
        },
        redirectUrl(url) {
            location.href = url
        },
        loginSuccessHandle(data) {
            this.msgSuccess('登录成功')
            this.$store.dispatch('user/login', data).then(() => {
                // 重置状态
                this.$store.dispatch('global/loginExpired', false).then(() => {})
                // 登录成功后路由跳回
                if (this.$route.query.redirect) {
                    this.$router.replace({
                        path: this.$route.query.redirect
                    })
                } else {
                    if (window.history.length <= 1) {
                        this.$router.push({ path: '/home' })
                    } else {
                        this.$router.push({ path: '/home' })
                    }
                }
            })
        },
        registerSuccessHandle() {
            this.formType = 'login'
            this.loginType = 'account'
        },
        loginHandle() {
            this.$refs['accountLoginForm'].validate(valid => {
                if (valid) {
                    this.$api
                        .request({
                            url: '/login/account',
                            method: 'post',
                            data: this.accountForm
                        })
                        .then(res => {
                            this.loginSuccessHandle(res.data)
                        })
                } else {
                    console.log('error submit!!')
                    return false
                }
            })
        }
    }
}
</script>

<style lang="scss" scoped>
.login-container {
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
}

.logo-banner {
  width: 50%;

  img {
    width: 50%;
    margin-left: 35%;
  }
}

.content {
  width: 420px;
  height: 500px;
  border: 1px solid rgb(68, 63, 63);
  border-radius: 80px;
  margin-left: 100px;
}

.logo-content {
  width: 400px;
  padding-left: 50px;

  .title {
    font-size: 35px;
    color: transparent;
    background-clip: text;
    font: 28px/60px '行楷';
    background-image: url('../../../assets/images/zt.jpg');
    background-position: 50% 80%;
    background-repeat: no-repeat;
    font-weight: bold;
    line-height: 134px;
    padding-left: 20px;
  }

  .cloud {
    width: 30%;
    height: 30%;
    float: right;
    padding-top: 100px;
    padding-right: 45px;
  }

  .login-form-tab {
    width: 300px;
  }
}
.other-login-icon {
  font-size: 25px;
  cursor: pointer;
}

.logo-content ::v-deep.el-tabs__nav-wrap::after {
  position: static !important;
}

.logo-content ::v-deep.el-tabs__active-bar {
  width: 59px !important;
  height: 7px !important;
  border-radius: 4px !important;
  left: 5% !important;
  background-color: #d8d8d8 !important;
}

.logo-tabs ::v-deep.el-tabs__item.is-active {
  color: #10141c !important;
}

::v-deep .el-input {
  height: 39px !important;
  line-height: 39px !important;
}

.link-btn {
  font-size: 12px !important;
}

::v-deep .el-input__inner {
  height: 39px !important;
  line-height: 39px !important;
  background: #f2f2f2 !important;
  border: none;
}

::v-deep .el-button {
  background: #408efc;
  border-radius: 10px;
  width: 145px;
}
</style>
